/* pages/list/list.wxss */



.container {
  display: flex;
  padding: 20rpx;
  flex-direction: row; /* 左右布局 */
  height: calc(100vh - 135px); /* 留出底部空间，高度为视口高度减去底部固定部分 */
}

.left-panel {
  width: 30%; /* 左侧占30%宽度 */
  padding-right: 20rpx;
  border-right: 1rpx solid #ddd; /* 左侧和右侧有分割线 */
  max-height: 100vh;
}

.category-item {
  font-size: 28rpx;
  padding: 10rpx;
  border-bottom: 1rpx solid #eee; /* 每个大分类下有分隔线 */
  cursor: pointer;
}

.category-item:hover {
  background-color: #f5f5f5; /* 鼠标悬停高亮 */
}

.right-panel {
  width: 70%; /* 右侧占70%宽度 */
  padding-left: 20rpx;
  overflow-y: auto; /* 商品内容多时显示滚动条 */
  max-height: 100vh; /* 确保右侧列表区域最大高度不超出屏幕 */
  padding-right: 10px; /* 给右侧添加一点内边距 */
}

.subcategory-item {
  font-size: 28rpx;
  padding: 10rpx;
  border-bottom: 1rpx solid #ddd; /* 每个小分类之间有分隔线 */
}
view .van-sidebar-item--selected{
  border-color:var(--sidebar-selected-border-color,greenyellow) ;
  color:var(--sidebar-selected-text-color,#323233) ;
  font-weight:var(--sidebar-selected-font-weight,550)
}
.buy1 {
  display: flex; /* 使用flexbox布局 */
  height: 600px;
  width: 330px;
  
}


// .de{
  
// }
.de image{
  display: flex;
  top: 0px;
  width: 330px;
  height: 200px;
  border-radius: 10px;
}
/* 定义单选框的样式 */

.button-container {
  margin-left: 20px;
  display: flex;
  flex-wrap: nowrap;  /* 禁止换行 */
  gap: 10px;          /* 设置按钮之间的间隔 */
  justify-content: flex-start; /* 左对齐按钮 */
  flex-direction: row;  /* 横向排列 */
}

/* 设置每个按钮项 */
.button-item {
  margin: 0; /* 去掉默认外边距 */
}

/* 如果需要限制按钮宽度，可以在这里加上样式 */
van-button {
 width: 150px;
 
}

.bottom-button {
  position: absolute;
  bottom: 40px;   /* 距离底部20px */
  right: 10px;    /* 距离右边20px */
  width: 150px;   /* 可根据需要设置宽度 */
  z-index: 10;    /* 确保按钮在顶部 */
}

 .but_item.data-v-57280228 {
  display: flex;
  position: relative;
  flex: 1;
}

  .but_item .price.data-v-57280228 {
  text-align: left;
  color: #e94e3c;
  line-height: 88rpx;
  box-sizing: border-box;
  font-size: 48rpx;
  font-weight: bold;
}

 .active.data-v-57280228 {
  position: absolute;
  right: 0rpx;
  bottom: 20rpx;
  display: flex;
}
 .ico.data-v-57280228 {
  font-size: 28rpx;
}

.con{
  position: relative;

  overflow: hidden; /* 禁止滚动条 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 将内容推到底部 */
  z-index: 10;
}

.list1 {
  width: 100%;  /* 设置长方形的宽度 */
  height: 60px;  /* 设置长方形的高度 */
  background-color: yellow;  /* 设置背景颜色 */
  position: relative;  /* 保证子元素可以根据其定位 */
  z-index: 2;  /* 保证 z-index 较低 */
  border-radius: 40px;  /* 设置圆角，数字越大，圆角越明显 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* 给圆角矩形添加阴影，增加立体感 */
}

.list {
  position: absolute;  /* 使用绝对定位 */
  bottom: 10px;  /* 紧贴 list1 底部 */
  right: 40px;  /* 紧贴 list1 右侧 */
  z-index: 3;  /* 保证 z-index 较高，位于 list1 上面 */
}
.list2{
  position: absolute;  /* 使用绝对定位 */
  bottom: 18px;  /* 紧贴 list1 底部 */
  left: 40px;  /* 紧贴 list1 右侧 */
  z-index: 3;  /* 保证 z-index 较高，位于 list1 上面 */

}
.backBut{
  position: absolute;;
  left: 50px;
  top: 517px;
}
.shoppingCart{
  margin-top: 50px;
}
.clearCart{
  position: absolute;
  top: 10px;
  left: 10px;
}
.delete-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 100%;
  background-color: #ff4d4f; /* 红色背景 */
  color: white; /* 白色文字 */
  font-size: 16px; /* 字体大小 */
  font-weight: bold; /* 粗体 */
  border-radius: 4px; /* 圆角 */
  text-align: center;
  transition: background-color 0.3s; /* 背景色变化的过渡效果 */
}



.cart3{
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 在行内进行空间分配 */
  margin-top: 10px;
}


.field2 .van-field__label {
  font-size: 16px !important;  /* 使用 !important 强制应用样式 */
  color: #333;
}

.field2 .van-field__control {
  font-size: 18px !important;  /* 使用 !important 强制应用样式 */
 
}